<section class="page">
    <header class="page-header">
        <img src="images/1.png" alt="">
    </header>
    <div class="page-body">
        <div class="container">
            <div class="product-detail">
                <div class="row">
                    <div class="col-xs-12 col-sm-6">
                        <div id="product-detail-cover" class="carousel slide" data-ride="carousel">
                            <ol class="carousel-indicators">
                                <li data-target="#product-detail-cover" data-slide-to="0" class=""></li>
                                <li data-target="#product-detail-cover" data-slide-to="1" class=""></li>
                                <li data-target="#product-detail-cover" data-slide-to="2" class="active"></li>
                            </ol>
                            <div class="carousel-inner">
                                <?php
                                if (!empty($product_imgage)) {
                                    for ($i = 0; $i < count($product_imgage); $i++) {
                                        ?>
                                        <div class="item <?php echo $i == 0 ? 'active' : '' ?>">
                                            <a href="<?php echo templateUrl() ?>images/<?php echo $product_imgage[$i]['name'] ?>" class="zoom_img"><img src="<?php echo templateUrl() ?>images/<?php echo $product_imgage[$i]['name'] ?>" alt=""></a>
                                        </div>
                                        <?php
                                    }
                                }
                                ?>   
                            </div>
                            <a class="left carousel-control" href="#product-detail-cover" data-slide="prev"><span class="fa fa-angle-left"></span></a>
                            <a class="right carousel-control" href="#product-detail-cover" data-slide="next"><span class="fa fa-angle-right"></span></a>
                        </div>
                        <link href="<?php echo templateUrl() ?>css/colorbox.css" rel="stylesheet">
                        <script src="<?php echo templateUrl() ?>js/jquery.colorbox.js"></script>
                        <script type="text/javascript">
                            $(document).ready(function() {
                                $(".zoom_img").colorbox({rel: 'zoom_img'});
                            });
                        </script>
                    </div>
                    <div class="col-xs-12 col-sm-6">
                        <div class="caption">
                            <?php
                            if (!empty($product)) {
                                ?>
                                <h4 class="title"><?php echo $product['name'] ?></h4>
                                <div class="price"><span>Giá: <?php echo $product['price'] ?> Đ</span></div>
                                <div class="detail">
                                    <?php echo $product['full_description'] ?>
                                </div>
                                <?php
                            }
                            ?>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content">
                <header class="content-header">
                    <h4>Sản phẩm cùng loại</h4>
                </header>
                <div class="content-body">
                    <div class="product-list product-relate">
                        <div class="row">
                            <?php
                            if(!empty($products)) {
                                for ($i = 0; $i < 6; $i++) {
                                    ?>
                                    <div class="col-xs-4 col-sm-2">
                                        <div class="thumb-item-2">
                                            <div class="cover">
                                                <img src="images/<?php echo $products[$i]['icon_image'] ?>" alt="">
                                            </div>
                                            <div class="caption">
                                                <h5 class="title"><?php echo $products[$i]['name'] ?></h5>
                                                <div class="price"><span><?php echo $products[$i]['price'] ?> Đ</span></div>
                                                <a href="<?php echo base_url($breadcrumb[count($breadcrumb) - 2]['url'] . '/' . $products[$i]['friendly_url']) ?>" class="view-detail-bg">Chi tiết</a>
                                            </div>
                                        </div>
                                    </div>
                                    <?php
                                }
                            }
                            ?>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>